<template>
  <div class="bg-container">
    <div class="my-header">
      <div class="search-form" v-if="headerShow">
        <a-form size="small" :model="pageData" auto-label-width>
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="流转卡号">
                <a-input class="bacClass" v-model="pageData.mlbz" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="打印张数">
                <a-input class="bacClass" v-model="pageData.mlbz" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <Toolbar :items="['生成码卡', '打印', '另存为']" @select="selectHandler"> </Toolbar>
      </div>
    </div>
  </div>

  <div class="gang"></div>

  <div class="html">
    <table>
      <tr>
        <th>客户</th>
        <th colspan="4">YA001/档口</th>
        <th>缸卡数</th>
        <th colspan="2">1-1</th>
      </tr>
      <tr>
        <th>客订单</th>
        <th colspan="3">AF-CPBH221106124212</th>
        <th>日期</th>
        <th colspan="3">2022-12-09</th>
      </tr>
      <tr>
        <th>货号</th>
        <th colspan="3">YF201240124</th>
        <th>缸号</th>
        <th colspan="3">AA1012412</th>
      </tr>
      <tr>
        <th>品名</th>
        <th colspan="7">新本木棉150</th>
      </tr>
      <tr>
        <th>色号</th>
        <th colspan="3">YA-124124</th>
        <th>颜色</th>
        <th colspan="3">017活性克</th>
      </tr>
      <tr>
        <th>对色缸号</th>
        <th colspan="3">AA1214124</th>
        <th>条数</th>
        <th>13</th>
        <th>重量</th>
        <th>317.3</th>
      </tr>
      <tr>
        <th>手感</th>
        <th></th>
        <th>毛效</th>
        <th></th>
        <th>颜色</th>
        <th></th>
        <th>色级</th>
        <th></th>
      </tr>
      <tr>
        <th>评语</th>
        <th colspan="4"></th>
        <th>签名</th>
        <th colspan="2"></th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
  import { post, get } from '@/api/http'
  import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
  } from '@/hooks/table'

  import { ref, reactive, onMounted, onActivated, onUnmounted } from 'vue'
  import Toolbar from '@/components/Toolbar.vue'
  import { Form, Message, Modal, Pagination } from '@arco-design/web-vue'
  import { FormInstance } from '@arco-design/web-vue/es/form'
  import emitter from '@/hooks/useEventBus'
  import validate from '@/hooks/useValidate'
  import { baseURL } from '../../../../api/axios.config'
  import axios from 'axios'
  import filedownload from 'js-file-download'

  interface ClothSet {
    id: any
    serialNumber: number | undefined
    FabricsClassify: string | undefined
    deleteState: any
    remark: string | undefined
    createName: string | undefined
    createTime: string | undefined
    updateName: string | undefined
    updateTime: string | undefined
  }

  export default {
    name: 'CodeCardPrinting',
    setup() {
      const headerShow = ref<boolean>(true)
      //查询
      const scrollbar = ref(true)

      let dataInt = [
        {
          id: 2016,
          serialNumber: 1,
          kehu: '测试',
          testType: '色牢度测试',
          testProject: '耐摩擦色牢度',
          mlbz: 'CG/T 3920',
          csff: 'csff',
          mlcsyq: 'mlcsyq',
          mlcsdl: 'mlcsdl',
          createName: 'admin',
          createTime: '2022-11-21 16:41:39',
          remark: '一般',
        },
      ]

      function doRefresh() {
        pageData.pageLoading = true

        table.handleSuccess(dataInt)
        pagination.setTotalSize(10)

        // post({
        //   url: "pdm/ClothClass/selectPage",
        //   data: {
        //     page: pagination.page,
        //     size: pagination.pageSize,
        //     deleteState: 0,
        //     FabricsClassify: pageData.dropDownData
        //   },
        // })
        //     .then(({ data, code }: any) => {
        //       if (code === 200) {
        //
        //         table.handleSuccess(data.list);
        //         pagination.setTotalSize(data.total);
        //
        //       }
        //     })
        //     .catch(console.log).finally(() => {
        //   pageData.pageLoading = false
        // })
      }

      const { selectedRowKeys, onSelectionChange } = useRowSelection()
      const pagination = usePagination(doRefresh)
      const table = useTable()
      const rowKey = useRowKey('id')
      //检验表单是否含有中文的方法
      const hasChiese = validate.includeChinese
      const tableColumns = useTableColumn([
        {
          title: '序号',
          key: 'serialNumber',
          dataIndex: 'serialNumber',
          width: 100,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '客户',
          key: 'kehu',
          dataIndex: 'kehu',
          width: 150,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '测试类型',
          key: 'testType',
          dataIndex: 'testType',
          width: 150,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '面料测试项目',
          key: 'testProject',
          dataIndex: 'testProject',
          width: 150,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '面料标准',
          key: 'mlbz',
          dataIndex: 'mlbz',
          width: 150,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '测试方法',
          key: 'csff',
          dataIndex: 'csff',
          width: 150,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '面料测试要求',
          key: 'mlcsyq',
          dataIndex: 'mlcsyq',
          width: 150,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '面料测试大类',
          key: 'mlcsdl',
          dataIndex: 'mlcsdl',
          width: 150,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '建单人',
          key: 'createName',
          dataIndex: 'createName',
          width: 150,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '建立时间',
          key: 'createTime',
          dataIndex: 'createTime',
          width: 150,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '备注',
          key: 'remark',
          dataIndex: 'remark',
          width: 150,
          sortable: {
            sortDirections: ['ascend', 'descend'],
          },
        },
        {
          title: '操作',
          key: 'id',
          dataIndex: 'id',
          slotName: 'action',
          width: 100,
          fixed: 'right',
        },
      ])
      const scroll = {
        x: 2000,
        y: 200,
      }
      const tablediv = ref(null)
      const pageData = reactive<{
        clothList: ClothSet[]
        showAdd: boolean
        sideTitle: string
        dropDownData: any
        pageLoading: boolean
        theight: number
        tablediv: any
        rHeight: number | undefined
        labelColFlex: any
      }>({
        clothList: [],
        showAdd: false,
        sideTitle: '新增客户测试项目',
        dropDownData: '',
        pageLoading: false,
        theight: 0,
        tablediv: null,
        rHeight: 0,
        labelColFlex: '80px',
      })
      //下拉框得到焦点
      const focusSel = () => {
        selCxAll({ FabricsClassify: '' })
      }
      //下拉数据
      const options = ref<any>(pageData.clothList)
      const loading = ref(false)
      const handleSearch = (value: any) => {
        if (value) {
          const ob = { FabricsClassify: value }
          loading.value = true
          selCxAll(ob)
          options.value = pageData.clothList
          loading.value = false
        } else {
          options.value = []
        }
      }

      //下拉框查询
      function selCxAll(val: any) {
        post({
          url: 'pdm/ClothClass/getFieldValue',
          data: val,
        }).then(({ data, code }: any) => {
          if (code === 200) {
            pageData.clothList = data
          } else {
            Message.error({
              content: '查询失败！',
              duration: 5000,
            })
          }
        })
      }

      onMounted(() => {
        selectHandler()
      })
      //查询
      const selectHandler = () => {
        pagination.page = 1
        doRefresh()
      }
      const queryData = reactive({
        clothType: '',
      })
      const addHandler = () => {
        for (var key in dataForm) {
          if (key === 'id') {
            dataForm[key] = null
          } else {
            dataForm[key] = ''
          }
        }
        pageData.showAdd = true
        pageData.sideTitle = '新增客户测试项目'
      }
      const dataForm = reactive<ClothSet>({
        id: null,
        serialNumber: 0,
        createTime: '',
        FabricsClassify: '',
        remark: '',
        updateTime: '',
        updateName: '',
        createName: '',
        deleteState: 0,
      })
      const formRef = ref<FormInstance>()
      const sideOk = () => {
        formRef.value?.validate().then((err) => {
          if (!err) {
            if (pageData.sideTitle === '新增客户测试项目') {
              post({
                url: 'pdm/ClothClass/insert',
                data: [dataForm],
              }).then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()

                  pageData.showAdd = false

                  Message.success({
                    content: '新增成功',
                    duration: 5000,
                  })
                  doRefresh()
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
            } else {
              post({
                url: 'pdm/ClothClass/update',
                data: [dataForm],
              }).then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()
                  pageData.showAdd = false

                  Message.success({
                    content: '修改成功',
                    duration: 5000,
                  })
                  doRefresh()
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
            }
          }
        })
      }
      const deleteHandler = () => {
        if (selectedRowKeys.value.length === 0) {
          return
        }
        Modal.confirm({
          title: '系统提示',
          content: '确认删除选中的数据?',
          onOk() {
            post({
              url: 'pdm/ClothClass/delete',
              data: selectedRowKeys.value,
            }).then(({ code, data }: any) => {
              if (code === 200) {
                Message.success({
                  content: '删除成功',
                  duration: 5000,
                })
                pagination.page = 1
                doRefresh()
              } else {
                Message.error({
                  content: '删除失败',
                  duration: 5000,
                })
              }
            })
          },
        })
      }
      const editHandler = (record: ClothSet) => {
        for (var key in record) {
          dataForm[key] = record[key]
        }
        pageData.sideTitle = '修改客户测试项目'
        pageData.showAdd = true
      }

      return {
        scroll,
        scrollbar,
        tablediv,
        hasChiese,
        deleteHandler,
        sideOk,
        formRef,
        dataForm,
        addHandler,
        selectedRowKeys,
        pagination,
        tableColumns,
        table,
        rowKey,
        pageData,
        queryData,
        editHandler,
        selectHandler,
        options,
        loading,
        handleSearch,
        focusSel,
        headerShow,
      }
    },
    components: { Toolbar },
  }
</script>
<style scoped lang="less">
  .html {
    table {
      border-collapse: collapse;
      font-size: 10px;
      border: black;
      width: 400px;
      table-layout: fixed;
    }
    td,
    th {
      border: 1px solid #000000;
      min-width: 50px;
      height: 30px;
    }
  }
</style>
